<!--首页-->
<template>
  <div id="home">

    <!-- 轮播图-->
    <el-carousel type="card" height="280px">
      <el-carousel-item v-for="(item, i) of lunboImg" :key="i" :title="item.title">
        <el-image :src="item.src" style="width: 600px;height: 280px" fit="fill"></el-image>
      </el-carousel-item>
    </el-carousel>

    <div class="home-body">

      <!-- 精选歌单,热门榜单-->
      <div class="first-column">
        <router-link to="/songSheet" tag="a" class="music-label-nav">
          <span>精选</span>
          <span>歌单</span>

          <el-link href="#/songSheet" class="link-song" :underline="false">更多</el-link>
        </router-link>

        <router-link to="/list" tag="a" class="music-label-nav">
          <span>热门</span>
          <span>榜单</span>

          <el-link href="#/list" class="link-list" :underline="false">更多</el-link>
        </router-link>

        <!-- 存放标签的盒子-->
        <div class="music-label-box">

          <!-- 大的音乐图片标签-->
          <router-link to="/songSheet" tag="div" class="music-label music-label-big">
            <el-image :src="songBig.img" style="width:330px;height:330px" fit="fill" />
            <a href="#">

              <!-- 播放图标，数量-->
              <p>
                <i class="el-icon-service">{{ songBig.number }}</i>
              </p>

              <!-- 歌曲介绍，作者-->
              <div class="music-info">
                <div>
                  <p class="text-hidden">{{ songBig.info }}</p>
                  <address>{{ songBig.address }}</address>
                </div>

                <!-- 播放图标-->
                <i class="el-icon-video-play"></i>
              </div>
            </a>
          </router-link>

          <!-- 存放小音乐标签的盒子-->
          <div>
            <!-- 小的音乐图片标签-->
            <router-link to="/songSheet" tag="div" class="music-label music-label-small" v-for="(item, i) of songSmall"
                :key="i">
              <el-image :src="item.img" style="width:160px; height:160px" />
              <a href="#">

                <!-- 播放图标，数量-->
                <p>
                  <i class="el-icon-service">{{ item.number }}</i>
                </p>

                <!-- 歌曲介绍，作者-->
                <div class="music-info">
                  <div>
                    <p class="text-hidden">{{ item.info }}</p>
                    <address>{{ item.address }}</address>
                  </div>

                  <!-- 播放图标-->
                  <i class="el-icon-video-play"></i>
                </div>
              </a>
            </router-link>
          </div>

          <!-- 热门榜单-->
          <div class="hot">

            <!-- 榜单中的一栏，每一栏都是一个链接-->
            <router-link to="/list" tag="a" v-for="(item, i) of list" :key="i">
              <el-image style="width: 100px; height: 100px" :src="item.img" fit="fill"></el-image>
              <a href="#">
                <i  class="el-icon-video-play"></i>
              </a>

              <!-- 榜单名称及排名前二的歌曲,作者-->
              <div class="hot-text">
                <h4>{{ item.title }}</h4>
                <p class="text-hidden">1.{{ item.music_1.name }} - {{ item.music_1.address }}</p>
                <p class="text-hidden">2.{{ item.music_2.name }} - {{ item.music_2.address }}</p>
              </div>
              <i class="el-icon-arrow-right"></i>
            </router-link>
          </div>

        </div>
      </div>

      <!-- 新歌首发，推荐MV -->
      <div class="second-column">
        <!-- 新歌首发-->
        <div>
          <a class="music-label-nav">
            <span>新歌</span>
            <span>首发</span>
          </a>

          <span v-for="(item, i) of ['华语','欧美','韩国','日本']" :key="i" :class="i === newMusicIndex ? 'cl-blue' : ''"
              @mouseenter="changeMscIndexAndPage(i)">{{ item }}</span>

          <el-button><span class="el-icon-caret-right"></span><span>全部播放</span></el-button>

          <!-- 分割线-->
          <el-divider></el-divider>

          <!-- 华语，欧美，韩国，日本 相对应语种歌曲列表-->
          <ul>
            <li v-for="(item, i) of newMusic[newMusicIndex][mscCurrentPage-1]" :key="i">
              <router-link to="/list" tag="a">
                <span>{{ item.name }} - {{ item.address }}</span>
                <time>{{ item.time }}</time>
                <i class="el-icon-caret-right"></i>
              </router-link>
            </li>
          </ul>

          <!-- 分页-->
          <el-pagination layout="prev, pager, next" :current-page="mscCurrentPage" :page-count="3"
               @prev-click="mscCurrentPage--" @next-click="mscCurrentPage++" @current-change="changeMscCurrentPage"></el-pagination>
        </div>

        <!-- 推荐MV -->
        <div>
          <a class="music-label-nav">
            <span>推荐</span>
            <span>MV</span>
          </a>

          <!-- 大的 MV 图片标签-->
          <div class="mv mv-big">
            <el-image style="width: 330px; height: 190px" :src="MVbig.img" fit="fit"></el-image>

            <div class="mv-info">
              <p class="text-hidden">{{ MVbig.title }}</p>
              <address>{{ MVbig.address }}</address>
            </div>
            <a href="#">
                <i class="el-icon-video-play"></i>
            </a>
          </div>

          <!-- 小的 MV 图片标签-->
          <div class="mv-small" v-for="(item, i) of MVsmall" :key="i">
            <el-image style="width: 160px; height: 80px" :src="item.img" fit="fit"></el-image>

            <a href="#">
              <i class="el-icon-video-play"></i>
            </a>

            <div class="mv-info">
              <p class="text-hidden">{{ item.title }}</p>
              <address>{{ item.address }}</address>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门电台，热门歌手 -->
      <div class="third-column">
        <!-- 热门电台-->
        <div>
          <a class="music-label-nav">
            <span>热门</span>
            <span>电台</span>
          </a>

          <!-- 电台图片列表-->
          <ul>
            <li v-for="(item, i) of radioStation" :key="i">
              <span>{{ item.title }}</span>

              <div>
                <a href="#">
                  <i class="el-icon-video-play"></i>
                </a>
                <!-- 电台图片,宽高为100px, 圆角显示-->
                <el-image :src="item.img" fit="fill" style="width: 100px; height: 100px; border-radius: 50px"></el-image>
              </div>

            </li>
          </ul>
        </div>

        <!-- 热门歌手栏-->
        <div class="hot-sg">
          <router-link to="/singer" tag="a" class="music-label-nav">
            <span>热门</span>
            <span>歌手</span>
          </router-link>

          <span v-for="(item, i) of ['华语','欧美','日韩']" :key="i" :class="i === singerIndex ? 'cl-blue': ''"
              @mouseenter="changeSgIndexAndPage(i)">{{ item }}</span>
          <el-link href="#/singer" :underline="false">更多</el-link>

          <!-- 热门歌手图片展示及链接-->
          <div class="hot-sgc">
            <router-link to="/singer" tag="a">
              <el-image :src="item" v-for="(item, i) of singer[singerIndex][sgCurrentPage-1]" :key="i" fit="fill"></el-image>
            </router-link>
          </div>

          <!-- 分页-->
          <el-pagination layout="prev, pager, next" :current-page="sgCurrentPage" :page-count="3"
               @prev-click="sgCurrentPage--" @next-click="sgCurrentPage++" @current-change="changeSgCurrentPage"></el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
// 导入轮播图片
import lunbo1 from '../public/img/轮播/lunbo1.jpeg';
import lunbo2 from '../public/img/轮播/lunbo2.jpeg';
import lunbo3 from '../public/img/轮播/lunbo3.jpeg';
import lunbo4 from '../public/img/轮播/lunbo4.jpeg';
import lunbo5 from '../public/img/轮播/lunbo5.jpeg';
//导入 精选歌单 图片
import song_1 from '../public/img/首页/song_1.jpeg';
import song_2 from '../public/img/首页/song_2.jpeg';
import song_3 from '../public/img/首页/song_3.jpeg';
import song_4 from '../public/img/首页/song_4.jpeg';
import song_5 from '../public/img/首页/song_5.jpg';

// 导入 热门榜单 图片
import list_1 from '../public/img/首页/list_1.jpeg';
import list_2 from '../public/img/首页/list_2.jpeg';
import list_3 from '../public/img/首页/list_3.jpeg';

// 导入 热门mv 图片
import mv_1 from '../public/img/首页/mv_1.jpeg';
import mv_2 from '../public/img/首页/mv_2.jpeg';
import mv_3 from '../public/img/首页/mv_3.jpeg';

// 导入 电台 图片
import radio_1 from '../public/img/首页/radio_1.jpeg';
import radio_2 from '../public/img/首页/radio_2.jpg';
import radio_3 from '../public/img/首页/radio_3.jpg';
import radio_4 from '../public/img/首页/radio_4.jpg';
import radio_5 from '../public/img/首页/radio_5.jpeg';
import radio_6 from '../public/img/首页/radio_6.jpeg';
import radio_7 from '../public/img/首页/radio_7.jpeg';
import radio_8 from '../public/img/首页/radio_8.jpg';
import radio_9 from '../public/img/首页/radio_9.jpeg';
import radio_10 from '../public/img/首页/radio_10.jpeg';

//导入 华语男歌手  图片
import cnBoy_1 from '../public/img/歌手/华语男歌手/img_1.jpeg';
import cnBoy_2 from '../public/img/歌手/华语男歌手/img_2.jpeg';
import cnBoy_3 from '../public/img/歌手/华语男歌手/img_3.jpeg';
import cnBoy_4 from '../public/img/歌手/华语男歌手/img_4.jpeg';
import cnBoy_5 from '../public/img/歌手/华语男歌手/img_5.jpeg';
import cnBoy_6 from '../public/img/歌手/华语男歌手/img_6.jpeg';
import cnBoy_7 from '../public/img/歌手/华语男歌手/img_7.jpeg';
import cnBoy_8 from '../public/img/歌手/华语男歌手/img_8.jpeg';
import cnBoy_9 from '../public/img/歌手/华语男歌手/img_9.jpg';
import cnBoy_10 from '../public/img/歌手/华语男歌手/img_10.jpg';

//导入 华语女歌手  图片
import cnGirl_1 from '../public/img/歌手/华语女歌手/img_1.jpeg';
import cnGirl_2 from '../public/img/歌手/华语女歌手/img_2.jpeg';
import cnGirl_3 from '../public/img/歌手/华语女歌手/img_3.jpeg';
import cnGirl_4 from '../public/img/歌手/华语女歌手/img_4.jpeg';
import cnGirl_5 from '../public/img/歌手/华语女歌手/img_5.jpeg';


//导入 日韩男歌手  图片
import rhBoy_1 from '../public/img/歌手/日韩男歌手/img_1.jpeg';
import rhBoy_2 from '../public/img/歌手/日韩男歌手/img_2.jpeg';
import rhBoy_3 from '../public/img/歌手/日韩男歌手/img_3.jpeg';
import rhBoy_4 from '../public/img/歌手/日韩男歌手/img_4.jpeg';
import rhBoy_5 from '../public/img/歌手/日韩男歌手/img_5.jpg';
import rhBoy_6 from '../public/img/歌手/日韩男歌手/img_6.jpeg';
import rhBoy_7 from '../public/img/歌手/日韩男歌手/img_7.jpeg';
import rhBoy_8 from '../public/img/歌手/日韩男歌手/img_8.jpeg';
import rhBoy_9 from '../public/img/歌手/日韩男歌手/img_9.jpeg';
import rhBoy_10 from '../public/img/歌手/日韩男歌手/img_10.jpg';

//导入 日韩女歌手  图片
import rhGirl_1 from '../public/img/歌手/日韩女歌手/img_1.jpg';
import rhGirl_2 from '../public/img/歌手/日韩女歌手/img_2.jpeg';
import rhGirl_3 from '../public/img/歌手/日韩女歌手/img_3.jpeg';
import rhGirl_4 from '../public/img/歌手/日韩女歌手/img_4.jpeg';
import rhGirl_5 from '../public/img/歌手/日韩女歌手/img_5.jpeg';

//导入 欧美男歌手  图片
import omBoy_1 from '../public/img/歌手/欧美男歌手/img_1.jpeg';
import omBoy_2 from '../public/img/歌手/欧美男歌手/img_2.jpeg';
import omBoy_3 from '../public/img/歌手/欧美男歌手/img_3.jpeg';
import omBoy_4 from '../public/img/歌手/欧美男歌手/img_4.jpeg';
import omBoy_5 from '../public/img/歌手/欧美男歌手/img_5.jpeg';
import omBoy_6 from '../public/img/歌手/欧美男歌手/img_6.jpeg';
import omBoy_7 from '../public/img/歌手/欧美男歌手/img_7.jpg';
import omBoy_8 from '../public/img/歌手/欧美男歌手/img_8.jpeg';
import omBoy_9 from '../public/img/歌手/欧美男歌手/img_9.jpeg';
import omBoy_10 from '../public/img/歌手/欧美男歌手/img_10.jpeg';

//导入 欧美女歌手  图片
import omGirl_1 from '../public/img/歌手/欧美女歌手/img_1.jpeg';
import omGirl_2 from '../public/img/歌手/欧美女歌手/img_2.jpg';
import omGirl_3 from '../public/img/歌手/欧美女歌手/img_3.jpeg';
import omGirl_4 from '../public/img/歌手/欧美女歌手/img_4.jpeg';
import omGirl_5 from '../public/img/歌手/欧美女歌手/img_5.jpeg';

export default {
  name: "home",

  beforeMount() {
    // 初始化新歌首发栏 歌曲总的信息数组
    this.newMusic = [this.newMusic_1, this.newMusic_2, this.newMusic_3, this.newMusic_4];
    // 初始化热门歌手栏 歌手图片数组
    this.singer = [this.singer_c, this.singer_o, this.singer_r];
  },

  data () {
    return {
      lunboImg: [
        {src: lunbo1, title: '模特——李荣浩'},
        {src: lunbo2, title: '唯此间江湖年少，偏爱纵横天下'},
        {src: lunbo3, title: '演员——薛之谦'},
        {src: lunbo4, title: 'POP/STARS——KDA'},
        {src: lunbo5, title: '安静的享受音乐吧~'},
      ],
      // 大图片标签
      songBig: {
        img: song_1, // 图片
        number: '156.3W', //播放数
        info: '乡村之旅：安静惬意，与自然同在', // 歌单介绍
        address: '小太阳' // 作者
      },
      // 小图片标签
      songSmall: [
        {
          img: song_2,
          number: '12.4W',
          info: '去年元月夜，花与灯依旧',
          address: '含光'
        },
        {
          img: song_3,
          number: '128.5W',
          info: '外国精选原创歌单',
          address: 'BigS'
        },
        {
          img: song_4,
          number: '5.6W',
          info: '独处，安静，听歌',
          address: '慎独者'
        },
        {
          img: song_5,
          number: '619.9W',
          info: '这一路上不孤单',
          address: '妙不可言'
        },
      ],

      // 热门榜单
      list: [
        {
          img: list_1, // 该榜单图片
          title: 'WS飙升榜', // 榜单名称

          // 歌曲 1
          music_1: {
            name: '关于你我还没想好', // 歌名
            address: '来一碗老于' // 演唱者
          },

          // 歌曲 2
          music_2: {
            name: '模特',
            address: '李荣浩'
          }
        },
        {
          img: list_2,
          title: 'WSTOP',

          music_1: {
            name: '醒不来的梦',
            address: '回小仙'
          },

          music_2: {
            name: '醉红妆',
            address: '孙艺琪'
          }
        },
        {
          img: list_3,
          title: '华语新歌榜',

          music_1: {
            name: '就懂了',
            address: '张信哲'
          },

          music_2: {
            name: '模特',
            address: '李荣浩'
          }
        }
      ],

      // 新歌首发栏 歌曲总的信息数组
      newMusic: [],
      newMusicIndex: 0,
      // 新歌首发栏下 分页默认的当前页数
      mscCurrentPage: 1,

      // 新歌首发栏 华语歌曲信息数组
      newMusic_1: [
        // 分页 第一页歌曲信息
        [
         {
           name: '模特', // 歌名
           address: '李荣浩', // 演唱者
           time: '05:06' // 歌曲时间
         },
         {
           name: '演员',
           address: '薛之谦',
           time: '04:21'
         },
         {
           name: '爸爸妈妈',
           address: '李荣浩',
           time: '04:44'
         },
         {
           name: '游山恋',
           address: '海伦',
           time: '03:43'
         },
         {
           name: '我们的光芒',
           address: '南征北战NZBZ',
           time: '03:36'
         },
         {
           name: '梦的光点',
           address: '王心凌',
           time: '03:51'
         },{
         name: '起飞了',
         address: '吴青峰',
         time: '04:57'
       },
         {
           name: '一个人挺好',
           address: '杨小壮',
           time: '04:30'
         }
       ],
        // 分页 第二页歌曲信息
        [
          {
            name: '一次离别', // 歌名
            address: '海来阿木', // 演唱者
            time: '04:39' // 歌曲时间
          },
          {
            name: '我的爱已经被偷走',
            address: '杨小壮',
            time: '03:18'
          },
          {
            name: '秋风辞',
            address: '花僮',
            time: '03:38'
          },
          {
            name: '千秋索',
            address: '魏新雨',
            time: '03:00'
          },
          {
            name: '寄离愁',
            address: '话僮',
            time: '03:54'
          },
          {
            name: '孤独是我想收的自由',
            address: '虎二',
            time: '04:07'
          },{
          name: '坚强的信念',
          address: '云朵',
          time: '03:55'
        },
          {
            name: '我怎么会忽然好想你',
            address: '于洋',
            time: '03:34'
          }
        ],
        // 分页 第三页歌曲信息
        [
          {
            name: '刺猬', // 歌名
            address: '付豪', // 演唱者
            time: '04:22' // 歌曲时间
          },
          {
            name: '无题',
            address: '胡夏',
            time: '04:38'
          },
          {
            name: '就趁现在',
            address: '南征北战NZBZ',
            time: '03:43'
          },
          {
            name: '芥末',
            address: '赵晨唏',
            time: '04:04'
          },
          {
            name: '醉红妆',
            address: '孙艺琪',
            time: '04:21'
          },
          {
            name: '心里的角落',
            address: '赖美云',
            time: '04:07'
          },{
          name: '曾经心痛',
          address: '鹏鹏音乐、万雨晴',
          time: '03:27'
        },
          {
            name: '夜夜夜漫长',
            address: '鹏鹏音乐、付豪',
            time: '02:47'
          }
        ]
      ],
      // 新歌首发栏 欧美歌曲信息数组
      newMusic_2: [
        // 分页 第一页歌曲信息
        [
          {
            name: 'Hold On', // 歌名
            address: 'Justin Bieber', // 演唱者
            time: '02:50' // 歌曲时间
          },
          {
            name: 'Beautiful Mistakes',
            address: 'Maroons、Megan Thee Stallion',
            time: '03:18'
          },
          {
            name: 'Bipolar',
            address: 'Bahari',
            time: '03:19'
          },
          {
            name: 'Life Is Good',
            address: 'Blake Rules',
            time: '02:15'
          },
          {
            name: 'Better Without You',
            address: 'Evanescence',
            time: '04:05'
          },
          {
            name: 'Gold Is A Girl',
            address: 'Groove Coverage',
            time: '03:39'
          },{
          name: 'Afterlife',
          address: 'Hex Cougar、Jarell Perry',
          time: '04:57'
        },
          {
            name: 'You',
            address: 'Approaching Nirvana',
            time: '05:49'
          }
        ],
        // 分页 第二页歌曲信息
        [
          {
            name: 'Selfish Love', // 歌名
            address: 'DJ Snake、Selena Gomez', // 演唱者
            time: '02:48' // 歌曲时间
          },
          {
            name: 'Fake A Smile',
            address: 'Alan Walker、salem ilese',
            time: '02:48'
          },
          {
            name: 'Superman',
            address: 'Vinai、Paolo Pellegrino、shuibui',
            time: '02:16'
          },
          {
            name: 'Like This',
            address: '2KBABY、Marshmello',
            time: '02:43'
          },
          {
            name: 'Give Me The Night',
            address: 'Steve Aoki、George Benson',
            time: '03:04'
          },
          {
            name: 'Around The World',
            address: 'KSHMR、NOUMENN',
            time: '03:19'
          },{
          name: 'Ringtone',
          address: 'R3hab、Fafaq、DNF',
          time: '02:24'
        },
          {
            name: 'Leave A Little Love',
            address: 'Aleeso、Armin van Buuren',
            time: '03:07'
          }
        ],
        // 分页 第三页歌曲信息
        [
          {
            name: 'Spolied', // 歌名
            address: 'Ant Saunders', // 演唱者
            time: '02:02' // 歌曲时间
          },
          {
            name: 'But cha',
            address: 'KYLE、Josh Golden',
            time: '02:20'
          },
          {
            name: 'The Moment',
            address: 'Umment Ozcan、Mila Falls',
            time: '02:38'
          },
          {
            name: 'Roots',
            address: 'Lucy Spraggan',
            time: '03:26'
          },
          {
            name: 'Clouds',
            address: 'Slayyter',
            time: '03:11'
          },
          {
            name: 'Spaceman',
            address: 'Nick Joans',
            time: '03:17'
          },{
          name: 'Bad Girl',
          address: 'Daya',
          time: '03:06'
        },
          {
            name: 'Gasoline',
            address: 'HAIM、Taylor Swift',
            time: '03:13'
          }
        ]
      ],
      // 新歌首发栏 韩国歌曲信息数组
      newMusic_3: [
        // 分页 第一页歌曲信息
        [
          {
            name: 'OKAY', // 歌名
            address: 'ASH ISLAND、SWINGS', // 演唱者
            time: '02:40' // 歌曲时间
          },
          {
            name: 'MAGNETIC',
            address: 'Rain、王嘉尔',
            time: '02:38'
          },
          {
            name: 'Trip',
            address: 'GEMINI、Jay Park',
            time: '02:57'
          },
          {
            name: 'Why Why Why',
            address: 'iKON',
            time: '03:26'
          },
          {
            name: 'WHY DON T WE',
            address: 'Rain、请夏',
            time: '02:58'
          },
          {
            name: 'TAIL',
            address: 'SUNMI',
            time: '03:11'
          },{
          name: 'Love so Fine',
          address: '车银优',
          time: '03:09'
        },
          {
            name: 'Encore',
            address: 'GTO7',
            time: '03:32'
          }
        ],
        // 分页 第二页歌曲信息
        [
          {
            name: 'AURORA', // 歌名
            address: 'Rain', // 演唱者
            time: '03:57' // 歌曲时间
          },
          {
            name: '尾巴',
            address: 'SUNMI',
            time: '03:11'
          },
          {
            name: 'Encore',
            address: 'GTO7',
            time: '03:32'
          },
          {
            name: '逃离',
            address: 'VERIVERY',
            time: '03:20'
          },
          {
            name: 'Too Good',
            address: 'IMLAY、钟成乐',
            time: '03:41'
          },
          {
            name: 'PARANOIA',
            address: '姜丹尼尔',
            time: '03:15'
          },
          {
          name: 'Take Me Home',
          address: 'ATEEZ',
          time: '03:41'
        },
          {
            name: 'Celebrate',
            address: 'ATEEZ',
            time: '03:16'
          }
        ],
        // 分页 第三页歌曲信息
        [
          {
            name: 'Bicycle', // 歌名
            address: '请夏', // 演唱者
            time: '02:59' // 歌曲时间
          },
          {
            name: 'Someday',
            address: 'Kim Feel',
            time: '03:36'
          },
          {
            name: 'Dont Call Me',
            address: 'SHINee',
            time: '03:40'
          },
          {
            name: 'Celebrity',
            address: 'IU',
            time: '03:12'
          },
          {
            name: 'Dynamite',
            address: 'BTS',
            time: '03:19'
          },
          {
            name: 'Lovesick Girls',
            address: 'BlankPink',
            time: '03:12'
          },
          {
            name: 'eight',
            address: 'IU、SUGA',
            time: '03:41'
          },
          {
            name: 'Blueming',
            address: 'IU',
            time: '03:37'
          }
        ]
      ],
      // 新歌首发栏 日本歌曲信息数组
      newMusic_4: [
        // 分页 第一页歌曲信息
        [
          {
            name: '蕾', // 歌名
            address: 'GReeeeN', // 演唱者
            time: '03:27' // 歌曲时间
          },
          {
            name: '色香水',
            address: '神山羊',
            time: '04:10'
          },
          {
            name: 'Yosh-FLAW',
            address: 'SawanoHiroyukin、Yosh',
            time: '04:00'
          },
          {
            name: 'Just Believe In Love',
            address: 'MAMAMOO',
            time: '02:48'
          },
          {
            name: '泡',
            address: 'King Gnu',
            time: '04:33'
          },
          {
            name: 'Heikousen',
            address: 'Eve、suis',
            time: '04:35'
          },
          {
            name: '萤',
            address: '藤田麻衣子',
            time: '05:08'
          },
          {
            name: '白昼梦',
            address: 'Sumika',
            time: '03:25'
          }
        ],
        // 分页 第二页歌曲信息
        [
          {
            name: 'Till I', // 歌名
            address: 'SawanoHiroyukin、夏里', // 演唱者
            time: '04:41' // 歌曲时间
          },
          {
            name: '膏',
            address: 'SawanoHiroyukin',
            time: '03:58'
          },
          {
            name: '相见可爱的你',
            address: '初音、SUMi',
            time: '03:26'
          },
          {
            name: '星光的梦幻曲',
            address: '手茑葵',
            time: '05:29'
          },
          {
            name: '创造',
            address: '星野源',
            time: '03:54'
          },
          {
            name: 'Heikousen',
            address: 'Eve、suis',
            time: '04:35'
          },
          {
            name: 'QQ',
            address: 'DISH',
            time: '03:40'
          },
          {
            name: '我回来了',
            address: '手茑葵',
            time: '05:32'
          }
        ],
        // 分页 第三页歌曲信息
        [
          {
            name: 'Luv Bias', // 歌名
            address: 'Kis-My-Ft2', // 演唱者
            time: '02:45' // 歌曲时间
          },
          {
            name: 'Universe',
            address: 'Official',
            time: '04:46'
          },
          {
            name: '烦死了啊',
            address: 'Ado',
            time: '03:24'
          },
          {
            name: '千花',
            address: '夏里',
            time: '04:45'
          },
          {
            name: '向夜晚奔去',
            address: 'YOASOBI',
            time: '04:21'
          },
          {
            name: '勿忘',
            address: 'Awesome City Club',
            time: '04:11'
          },
          {
            name: '怪物',
            address: 'YOASOBI',
            time: '03:26'
          },
          {
            name: '炎',
            address: 'LiSA',
            time: '04:34'
          }
        ],
      ],

      // 大的MV 标签
      MVbig: {
        img: mv_1,  // MV图片
        title: '气球在天上飞，你说你有点难追',  // mv标题
        address: '周杰伦'  // MV作者
      },
      // 小的MV 标签
      MVsmall: [
        {
          img: mv_2,  // MV图片
          title: '你那么爱我，干嘛演出细节',  // mv标题
          address: '薛之谦'  // MV作者
        },
        {
          img: mv_3,  // MV图片
          title: '少女时代队长，最新单曲《rain》',  // mv标题
          address: '金泰妍'  // MV作者
        },
      ],

      // 各类电台信息
      radioStation: [
        {img: radio_1, title: 'KTV必点曲'},
        {img: radio_2, title: '中文DJ'},
        {img: radio_3, title: 'WS热歌'},
        {img: radio_4, title: '网络热歌'},
        {img: radio_5, title: '经典老歌'},
        {img: radio_6, title: '老情歌'},
        {img: radio_7, title: '新歌'},
        {img: radio_8, title: '动漫'},
        {img: radio_9, title: '轻音乐'},
        {img: radio_10, title: '最爱成名曲'},
      ],

      // 热门歌手图片
      singer: [],
      singerIndex: 0,
      // 热门歌手 栏下 分页默认的当前页数
      sgCurrentPage: 1,

      // 热门 中国歌手图片
      singer_c: [
        // 分页 第一页
        [cnBoy_1, cnBoy_2, cnBoy_3, cnBoy_4, cnBoy_5],
        // 分页 第二页
        [cnBoy_6, cnBoy_7, cnBoy_8,cnBoy_9, cnBoy_10],
        // 分页 第三页
        [cnGirl_1, cnGirl_2, cnGirl_3, cnGirl_4, cnGirl_5]
      ],
      // 热门 欧美歌手图片
      singer_o: [
        [omBoy_1, omBoy_2, omBoy_3, omBoy_4, omBoy_5],
        [omBoy_6, omBoy_7, omBoy_8, omBoy_9, omBoy_10],
        [omGirl_1, omGirl_2, omGirl_3, omGirl_4, omGirl_5]
      ],
      // 热门 日韩歌手图片
      singer_r: [
        [rhBoy_1, rhBoy_2, rhBoy_3, rhBoy_4, rhBoy_5,],
        [rhBoy_6, rhBoy_7, rhBoy_8, rhBoy_9, rhBoy_10,],
        [rhGirl_1, rhGirl_2, rhGirl_3, rhGirl_4, rhGirl_5]
      ],
    }
  },
  methods: {
    // 当新歌首发栏下 分页的当前页改变时, 默认当前页变量的值与当前页同步
    changeMscCurrentPage (currentPage) {
      this.mscCurrentPage = currentPage;
    },

    // 当热门歌手 栏下 分页的当前页改变时, 默认当前页变量的值与当前页同步
    changeSgCurrentPage (currentPage) {
      this.sgCurrentPage = currentPage;
    },

    // 当新歌首发栏歌曲类别改变时，改变显示的歌曲信息并将分页恢复到第一页
    changeMscIndexAndPage (index) {
      this.newMusicIndex = index;
      this.mscCurrentPage = 1;
    },

    // 当热门歌手栏歌手类别改变时，改变显示的歌手信息并将分页恢复到第一页
    changeSgIndexAndPage (index) {
      this.singerIndex = index;
      this.sgCurrentPage = 1;
    }
  },
}
</script>

<style lang="less" scoped>
@import "../public/less/home";
</style>